<template>
    <div class="reportlogin" style="width:400px;margin:0 auto">
        <!-- <img src="./../assets/jingpu.png"  style="width:400px;margin:0 auto;margin-bottom:40px;">  -->
        <h2>添加单位</h2>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm" style="margin:0"> 
            <el-form-item label="单位详细名称:" prop="unitDetailedName">
                <el-input v-model="ruleForm.unitDetailedName"></el-input>
            </el-form-item> 
            <el-form-item label="统一社会信用代码:" prop="socialCreditCode" >
                <el-input v-model="ruleForm.socialCreditCode"></el-input>
            </el-form-item >
            <el-form-item label="单位实际地址:" prop="companyAddress" >
                <el-input v-model="ruleForm.companyAddress"></el-input>
            </el-form-item >
            <el-form-item label=" 上传营业执照：" class="loadImg">
                <el-upload
                class="avatar-uploader"
                :multiple="true"
                :action="actionPath"
                :data="postData"
                :auto-upload="uploadnow"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :on-remove="handleRemove"
                :limit=1
                >
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item >
            <el-form-item style=""> 
                <el-button style="" size="small" type="success" @click="submitForm('ruleForm')">添加单位</el-button> 
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data() {
        return {
            postData:{},
            imageUrl: '',
            actionPath:'http://upload.qiniup.com',
            domain:'',
            key:'',
            uploadnow:true,
            ruleForm: {
                unitDetailedName: '', //单位全称
                socialCreditCode: '',//社会信用代码
                companyAddress:''//单位实际地址
            },
            rules: {
                unitDetailedName: [
                { required: true, message: '请输入单位全称', trigger: 'blur' },
                { min: 5, max: 30, message: '长度在 5 到 30 个字符', trigger: 'blur' }
                ],
                socialCreditCode:[
                { required: true, message: '请输入社会信用代码', trigger: 'blur' },
                { min: 18, max: 18, message: '长度为18个字符', trigger: 'blur' } 
                ],
                companyAddress:[
                { required: true, message: '单位实际地址', trigger: 'blur' },
                
                ],
            },
        };
    },
    mounted:function(){
        this.getToken();
    },
    methods:{
        submitForm(ruleForm){
            console.log(this.key);
            if(!this.key){
                this.$message.error("请先上传营业执照");
                return;
            }
            this.$refs[ruleForm].validate((valid) =>{
                if (valid) {
                    let self = this;
                    this.$http({
                    method:'post',
                    url:'/inventory/add',
                    data:{
                            "unitDetailedName":this.ruleForm.unitDetailedName,
                            "socialCreditCode":this.ruleForm.socialCreditCode,
                            "companyAddress":this.ruleForm.companyAddress,
                            "url":this.domain+'/'+this.key,
                        },
                }).then(function(res){
                    console.log(res);
                    let data = res.data;
                    if(data.status === 200){
                        self.$message.success(data.message);
                        self.$router.push({ path: "/bindCompany" });

                    }else{
                        self.$message.error(data.message);
                    }
                }).catch(function(err){
                    console.log(err)
                })
                }
            })
        },
        handleAvatarSuccess(res, file) {
            console.log(res);
            this.key = res.key;
        // console.log(file);
            this.imageUrl = URL.createObjectURL(file.raw);
        },
      beforeAvatarUpload(file) {
        if(!this.ruleForm.unitDetailedName){
            this.$message.error('请先输入单位全称');
            return false;
        }
        let length = file.name.split(".").length;
        let type = file.name.split(".")[length-1];
        console.log(type);
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 4;
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 4MB!');
        }
        //return isJPG && isLt2M;
        let self = this;
        $.ajax({
        url:this.$ajaxUrl+'/qiniu/token?name='+this.ruleForm.unitDetailedName+'&type=1&suffix=.'+type,
        type:'GET', //GET
        async:false,    //或false,是否异步
        timeout:5000,    //超时时间
        dataType:'json',    //返回的数据格式：
        beforeSend:function(xhr){
        },
        success:function(data,textStatus,jqXHR){
            if(data.status === 200){
                console.log(data);
                self.postData.token = data.data.token;
                self.postData.key = data.data.imgUrl;
                self.domain = data.data.domain;
                console.log(self.postData);
            }else{
                self.$message.error(data.message);
            }
           
        },
})
       
      },
      getToken(){
      
      },
      submit(){
          console.log("11111");
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList){
          this.imageUrl = '';
          console.log(file);
          console.log(fileList);
      },
    }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  scoped>
.reportlogin h1{
    font-weight: normal;
}
.reportlogin h2{
    margin-left: 35%;
    padding-top:80px ;
    padding-bottom:30px;
    font-size: 30px
}
.reportlogin ul {
    list-style-type: none;
    padding: 0;
}
/* .reportlogin li {
    display: inline-block;
    margin: 0 10px;
} */
 .reportlogin a {
    color: #42b983;
}
.reportlogin .el-form-item__label{
    text-align:left;
}
.reportlogin .el-form-item__content{
    margin: 0;
}
.reportlogin .el-upload-list--text{
    float: right;
}
.reportlogin .loadImg .el-form-item__label{
    margin-top:45px;
    margin-left: 10px;
}
.reportlogin .loadImg.avatar-uploader.el-upload{
    margin-left: 10px!important;
}
</style>
<style>
/* 上传营业执照部分css */
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
